<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>标准折现图</title>
</head>
<body>
<div id="main" style="width: 600px;height: 400px"></div>
<script src="../echarts/dist/echarts.min.js"></script>
</body>
<script>
var mychart=echarts.init(document.getElementById('main'));
    option={
        title:{//标题名字===
            text:'未来一周气温变化',
            subtext:'副标题：纯属虚构'
        },
        tooltip:{//提示框====
            trigger:'axis'
        },
        legend:{//图裂===
            data:['最高气温','最低气温']
        },
        toolbox:{//工具栏===
            show:true,
            feature:{
                mark:{show:true},
                dataView:{show:true,readOnly:false},
                magicType:{show:true,type:['line','bar']},
                restore:{show:true},
                saveAsImage:{show:true}
            }
        },
        calculable:true,
        xAxis : [//x轴
            {
                type : 'category',
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [//Y轴
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} °C'
                }
            }
        ],
        series : [
            {
                name:'最高气温',
                type:'line',
                data:[11, 11, 15, 13, 12, 13, 10],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'最低气温',
                type:'line',
                data:[1, -2, 2, 5, 3, 2, 0],
                markPoint : {//点的位置确认====
                    data : [
                        {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5},
                        {type:'max',name:'最大值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };
    mychart.setOption(option);
</script>
</html>